﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfDjackInfo.aspx.cs" Inherits="msBsc.WebUi.wMall.Seller.wfDjackInfo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地接客信息</title>
    <link href="/themes/wStyle1/css/sLayout.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sHead.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sFoot.css" rel="stylesheet" />
    <link href="/jqPlugin/laydate/skins/default/laydate.css" rel="stylesheet" />
    <link href="/jqPlugin/SelectSimu/css/base.css" rel="stylesheet" />
    <link href="/jqPlugin/hdfu/hdfu.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/from.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/Seller/sDjackInfo.css" rel="stylesheet" />

    <link href="/jqPlugin/layer/skin/layer.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/usermenu.css" rel="stylesheet" />
</head>
<body>
    <div class="wf_all">
        <div id="divLoginInfo">
            <%=msBsc.WebUi.Code.QtHtmlGet.GetHeaderLoginInfo() %>
        </div>
        <div class="main-container">
            <div class="sidebar-scroll">
                <%=msBsc.WebUi.Code.QtHtmlGet.GetDjackMenuHtml() %>
            </div>
            <div class="main-Info">
                <div class="tnavigation">
                    <a class="nav" href="#">我的地接客</a>&gt;
				        <a class="nav" href="#">个人中心</a>&gt;
				        <a class="nav-on" href="#">个人资料</a>
                </div>
                <div class="listmenu">
                    <ul id="wSlist" class="list">
                        <li class="selected">
                            <a class="link"  href="javascript:;">
                                <span>个人资料</span>
                                <i class="interval">|</i>
                            </a>
                        </li>
                    </ul>
                    <div class="wrap-line">
                        <span id="sold-boder" class="line" style="left: 0px;"></span>
                    </div>
                </div>
                <div class="modle">
                    <ul class="main-horizontal">
                        <!-- BEGIN 头像 -->
                        <li>
                            <span class="control-span">头像<span class="required" style="display: none;">*</span></span>
                            <div class="controls">
                                <div style="display: inline; float: left;">
                                    <div class="uploadbox" data-count="1" style="display: block">
                                        <div class="pf-avatar-box">
                                            <img id="headImg" />
                                        </div>
                                    </div>
                                </div>
                                <div id="photoMessage" class="help-inline"></div>
                            </div>
                        </li>
                        <!-- END 头像 -->
                        <!-- BEGIN 昵称 -->
                        <li>
                            <span class="control-span">昵称<span class="required" style="display: none;">*</span></span><div class="controls" id="userName"></div>
                        </li>
                        <!-- END 昵称 -->
                        <!-- BEGIN 所在地 -->
                        <li>
                            <span class="control-span">所在地<span class="required" style="display: none;">*</span></span>
                            <div class="controls">
                                <span id="country" data-value="DF6723BE-A25C-4F77-BB49-A1662D3E6F2A">中国</span> <span id="city" data-value=""></span><span id="destion" data-value=""></span>
                            </div>
                        </li>
                        <!-- END 所在地 -->

                        <!-- BEGIN 性别 -->
                        <li>
                            <span class="control-span">性别<span class="required" style="display: none;">*</span></span><div class="controls" id="Sex"><span data-value="F"></span></div>
                        </li>
                        <!-- END 性别 -->

                        <!-- BEGIN 邀请路径 -->
                        <li>
                            <span class="control-span">邀请地址</span><div class="controls" id="inviteUrl"></div>
                        </li>
                        <!-- END 邀请路径 -->

                        <!-- BEGIN 简介 -->
                        <li>
                            <span class="control-span">简介<span class="required" style="display: none;">*</span></span><div class="controls" id="briefIntrodu"></div>
                        </li>
                        <!-- END 简介 -->

                        <!-- BEGIN QQ -->
                        <li>
                            <span class="control-span">QQ<span class="required" style="display: none;">*</span></span><div class="controls" id="txtQQ"></div>
                        </li>
                        <!-- END QQ -->

                        <!-- BEGIN 手机 -->
                        <li>
                            <span class="control-span">手机<span class="required" style="display: none;">*</span></span><div class="controls" id="txtMobile"></div>
                        </li>
                        <!-- END 手机 -->

                        <!-- BEGIN 座机 -->
                        <li>
                            <span class="control-span">座机</span><div class="controls" id="txtPhone"></div>
                        </li>
                        <!-- END 座机 -->

                        <!-- BEGIN 微信 -->
                        <li>
                            <span class="control-span">微信</span><div class="controls" id="txtMicro"></div>
                        </li>
                        <!-- END 微信 -->

                        <!-- BEGIN 邮箱 -->
                        <li>
                            <span class="control-span">邮箱<span class="required" style="display: none;">*</span></span><div class="controls" id="txtEmail"></div>
                        </li>
                        <!-- END 邮箱 -->
                    </ul>
                    <!-- BEGIN 添加车辆按钮 -->
                    <div class="form-actions" id="editButton">
                        <span onclick="editBasicInfo();" class="up-btn2 tm-skin-yellow2">编 辑</span>
                    </div>
                    <!-- END 添加车辆按钮 -->
                </div>
                <div class="edit" style="display: none">
                    <ul class="main-horizontal">
                        <!-- BEGIN 头像 -->
                        <li>
                            <span class="control-span">头像<span class="required">*</span></span>
                            <div class="controls">
                                <div style="display: inline; float: left;">
                                    <div class="uploadbox" data-count="0" data-value="djack" style="display: block">
                                        <div class="pf-avatar-box" id="imgHead">
                                            <img src="" />
                                            <a class="pf-edit-avatar" href="javascript:;">编辑头像</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="help-inline"></div>
                            </div>
                        </li>
                        <!-- END 头像 -->
                        <!-- BEGIN 昵称 -->
                        <li>
                            <span class="control-span">昵称<span class="required">*</span></span><div class="controls">
                                <input class="input" type="text" id="txtUserName" value="" />
                                <span id="userNameMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 昵称 -->
                        <!-- BEGIN 所在地 -->
                        <li>
                            <span class="control-span">所在地<span class="required">*</span></span>
                            <div class="controls" id="location">
                                <div id="country_select" class="select"></div>
                                <div id="city_select" class="select"></div>
                                <div id="destion_select" class="select"></div>
                                <span id="locationMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 所在地 -->

                        <!-- BEGIN 性别 -->
                        <li>
                            <span class="control-span">性别<span class="required">*</span></span><div class="controls">
                                <input id="man" type="radio" style="margin-right: 5px;" name="sex" value="M" />
                                男
                                <input id="wman" type="radio" style="margin-left: 20px; margin-right: 5px;" value="F" name="sex" />
                                女
                                <span id="sexMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 性别 -->

                        <!-- BEGIN 邀请路径 -->
                        <li>
                            <span class="control-span">邀请地址</span><div class="controls" id="txtInviteUrl"></div>
                        </li>
                        <!-- END 邀请路径 -->

                        <!-- BEGIN 简介 -->
                        <li>
                            <span class="control-span">简介<span class="required">*</span></span><div class="controls">
                                <textarea class="textarea-large" id="txtBriefIntrodu"></textarea>
                                <span id="briefIntroduMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 简介 -->

                        <!-- BEGIN QQ -->
                        <li>
                            <span class="control-span">QQ</span><div class="controls">
                                <input class="input" id="qq" type="text" value="" />
                                <span id="qqMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END QQ -->

                        <!-- BEGIN 手机 -->
                        <li>
                            <span class="control-span">手机<span class="required">*</span></span><div class="controls">
                                <input class="input" type="text" id="mobile" value="" />
                                <span id="mobileMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 手机 -->

                        <!-- BEGIN 座机 -->
                        <li>
                            <span class="control-span">座机</span><div class="controls">
                                <input id="PhoneTitle" class="input" type="text" style="width: 50px" value="" />
                                -
                                <input id="PhoneNumber" class="input" type="text" style="width: 130px" value="" />
                                <span id="phoneMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 座机 -->

                        <!-- BEGIN 微信 -->
                        <li>
                            <span class="control-span">微信</span><div class="controls">
                                <input class="input" type="text" id="micro" value="" />
                                <span id="microMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 微信 -->

                        <!-- BEGIN 邮箱 -->
                        <li>
                            <span class="control-span">邮箱<span class="required">*</span></span><div class="controls">
                                <input class="input" type="text" id="email" value="369177359@qq.com" />
                                <span id="emailMessage" class="help-inline"></span>
                            </div>
                        </li>
                        <!-- END 邮箱 -->
                    </ul>
                    <!-- BEGIN 添加车辆按钮 -->
                    <div class="form-actions">
                        <span onclick="seveUserInfo();" class="up-btn2 tm-skin-red2">保 存</span>
                        <span onclick="cancelEdit();" class="up-btn2 tm-skin-Grey2">取 消</span>
                    </div>
                    <!-- END 添加车辆按钮 -->

                </div>

            </div>
            <div class="ui-mask"></div>
            <div id="altContent">
            </div>
        </div>
        <!--start JS引用-->
        <script src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
        <script src="/jqPlugin/js/jBase.js"></script>
        <script src="/jqPlugin/js/jBPage.js"></script>
        <script src="/jqPlugin/layer/layer.min.js"></script>
        <script src="/jqPlugin/js/laytpl.js"></script>
        <script src="/jqPlugin/laydate/laydate.js"></script>
        <script src="/jqPlugin/SelectSimu/js/SelectSimu.js"></script>
        <script src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
        <script src="/themes/wStyle1/js/comm/DateInfo.js"></script>
        <script src="/jqPlugin/hdfu/hdfu.js"></script>

        <script src="/jqPlugin/SelectSimu/js/SelectSimu.js"></script>
        <script src="/themes/wStyle1/js/comm/jsLayout.js"></script>
        <!--end JS引用-->
        <script type="text/javascript">
            var parentsId = "00000000-0000-0000-0000-000000000000";
            var currentCountry = "";
            var currentCity = "";
            (function () {
                $('#country_select .selectList li').live('click', function () {
                    var outerInnerId = this.getAttribute('data-value');
                    if (currentCountry == outerInnerId) {
                        return;
                    }
                    currentCountry = outerInnerId;
                    parentsId = outerInnerId;
                    btnDo("getArea2");
                });
                $('#city_select .selectList li').live('click', function () {
                    var provinceId = this.getAttribute('data-value');
                    if (provinceId == currentCity) {
                        return;
                    }
                    currentCity = provinceId;
                    parentsId = provinceId;
                    btnDo("getArea3");
                });

                $(".pf-avatar-box").hover(function () {
                    $(".pf-edit-avatar").show();
                }, function () {
                    $(".pf-edit-avatar").hide();
                });
            })()

            function btnDo(sEbtn) {
                GtGrid1Action = sEbtn;
                var opart = GetGtParam();
                if (sEbtn == "getArea3" || sEbtn == "getArea2") {
                    opart.AddCell("parentsId", parentsId)
                }
                ajaxComm(opart);
            };

            //执行AJAX调用时获取参数
            function GetGtParam() {
                var _jsParam = new jsonRow();
                _jsParam.AddCell("ACTION", GtGrid1Action);
                return _jsParam;
            };

            btnDo("init");

            function setDjackInfo(data) {
                $("#headImg").attr("src", data.rows[0].CUSTOMER_DEFAULT_PIC + " 197x197img.jpg");
                $("#inviteUrl").text("http://www.dijieke.com/wp_UserRegister.htm?invatationCode=" + data.rows[0].CUSTOMER_INVITATION_CODE);
                $("#txtInviteUrl").text("http://www.dijieke.com/wp_UserRegister.htm?invatationCode=" + data.rows[0].CUSTOMER_INVITATION_CODE);
                $("#userName").text(data.rows[0].CUSTOMER_NICK);
                $("#country").text(data.rows[0].P_COUNTRY_NAME);
                $("#country").attr("data-value", data.rows[0].CUSTOMER_COUNTRY_ID);
                currentCountry = data.rows[0].CUSTOMER_COUNTRY_ID;
                $("#city").text(data.rows[0].P_CITY_NAME);
                $("#city").attr("data-value", data.rows[0].CUSTOMER_CITY_ID);
                currentCity = data.rows[0].CUSTOMER_CITY_ID;
                $("#destion").text(data.rows[0].P_DISTINATION_NAME);
                $("#destion").attr("data-value", data.rows[0].CUSTOMER_DISTINATION_ID);
                $("#Sex span").attr("data-value", data.rows[0].CUSTOMER_BASEINFO_GENDER);
                if (data.rows[0].CUSTOMER_BASEINFO_GENDER == "M") {
                    $("#Sex span").text("男");
                } else if (data.rows[0].CUSTOMER_BASEINFO_GENDER == "F") {
                    $("#Sex span").text("女");
                }
                $("#briefIntrodu").text(data.rows[0].CUSTOMER_BASEINFO_INTRO);
                $("#txtQQ").text(data.rows[0].CUSTOMER_BASEINFO_QQ);
                $("#txtPhone").text(data.rows[0].CUSTOMER_BASEINFO_PHONE);
                $("#txtMobile").text(data.rows[0].CUSTOMER_BASEINFO_MOBILE);
                $("#txtMicro").text(data.rows[0].CUSTOMER_WECHAT_NO);
                $("#txtEmail").text(data.rows[0].CUSTOMER_BASEINFO_EMAIL);
                //$("#starCur0").width(Math.round(invitationCount * 85 * 2 / 100));
                //$("#starUser0").text(invitationCount + " 人");
            }

            //实例化地区列表
            function setArea(input, width, zIndex, listNum, listValue, listOption, valueId, valueName) {
                $("#" + input).SelectSimu({
                    width: width,
                    zIndex: zIndex,
                    listNum: listNum,
                    listValue: listValue,
                    listOption: listOption,
                    imgSrc: '/jqPlugin/SelectSimu/img/icon_down.png'
                });
                $("#" + input + " input").val(valueId);
                $("#" + input + " span").text(valueName);
            }

            //更新地区下拉列表
            function updateSelet(inputId, data) {
                var selectValue = $("#" + inputId + " .selectList ul");
                selectValue.html("");
                for (var i = 0; i < data.rows.length; i++) {
                    selectValue.append('<li data-value="' + data.rows[i].COUNTRY_CITY_ID + '">' + data.rows[i].COUNTRY_CITY_NME + '</li>');
                }
                if (data.rows.length > 0) {
                    $("#" + inputId + " input").val(data.rows[0].COUNTRY_CITY_ID);
                    $("#" + inputId + " span").text(data.rows[0].COUNTRY_CITY_NME);
                }
            }

            function editBasicInfo() {
                $("#txtUserName").val($("#userName").text());
                //显示性别
                if ($("#Sex span").attr("data-value") == "M") {
                    $("#man").attr("checked", "checked");
                } else {
                    $("#wman").attr("checked", "checked");
                }
                $("#txtBriefIntrodu").val($("#briefIntrodu").text());
                $("#qq").val($("#txtQQ").text());
                $("#mobile").val($("#txtMobile").text());
                $("#imgHead img").attr("src", $("#headImg").attr("src"));
                //电话
                var phone = $("#txtPhone").text();
                var phoneTitle = "";
                var PhoneNumber = "";
                if (!IsNull(phone)) {
                    phoneTitle = phone.split('-')[0];
                    PhoneNumber = phone.split('-')[1];
                }
                $("#PhoneTitle").val(phoneTitle);
                $("#PhoneNumber").val(PhoneNumber);
                $("#micro").val($("#txtMicro").text());
                $("#email").val($("#txtEmail").text());
                $(".modle").hide();
                $(".edit").show();
                if (IsNull($("#city_select").html())) {
                    var countryName = $("#country").text();
                    var country = $("#country").attr("data-value");
                    var cityName = $("#city").text();
                    var city = $("#city").attr("data-value");
                    var destionName = $("#destion").text();
                    var destion = $("#destion").attr("data-value");
                    var opart = new jsonRow();
                    opart.AddCell("ACTION", "initCity");
                    opart.AddCell("parentsId", "00000000-0000-0000-0000-000000000000");
                    opart.AddCell("countryName", countryName);
                    opart.AddCell("country", country);
                    opart.AddCell("cityName", cityName);
                    opart.AddCell("city", city);
                    opart.AddCell("destionName", destionName);
                    opart.AddCell("destion", destion);
                    ajaxComm(opart);
                }
            }

            function seveUserInfo() {
                var userName = $("#txtUserName").val();
                if (!vfcUserName(userName)) {
                    return
                }
                var sex = $("input[name=sex]:checked").val();
                if (!vfcSex(sex)) {
                    return;
                }
                var briefIntrodu = $.trim($("#txtBriefIntrodu").val());

                if (!vfcIntrodu(briefIntrodu)) {
                    return;
                }
                var countryId = $("#country_select input").val();
                if (!vfcCity(countryId)) {
                    return;
                }
                var cityId = $("#city_select input").val();
                if (!vfcCity(cityId)) {
                    return;
                }
                var destionId = $("#destion_select input").val();
                if (!vfcCity(destionId)) {
                    return;
                }

                var qq = $("#qq").val();
                if (!vfcQQ(qq)) {
                    return;
                }

                var mobile = $("#mobile").val();
                if (!vfcMobile(mobile)) {
                    return;
                }

                var phone = "";
                var phoneTitle = $("#PhoneTitle").val();
                var PhoneNumber = $("#PhoneNumber").val();
                if (!IsNull(phoneTitle) && !IsNull(PhoneNumber)) {
                    phone = phoneTitle + "-" + PhoneNumber;
                }

                var micro = $("#micro").val();
                if (!vfcMicro(micro)) {
                    return;
                }

                var email = $("#email").val();
                if (!vfcEmail(email)) {
                    return;
                }
                var djackImg = $("#imgHead img").attr("src");
                if (!vfcImg(djackImg)) {
                    return;
                }
                djackImg = djackImg.split(' ')[0];
                //var arrDjackImg = djackImg.split("/");
                //djackImg = arrDjackImg[arrDjackImg.length - 1];
                var opart = new jsonRow();
                opart.AddCell("ACTION", "saveUserInfo");
                opart.AddCell("userName", userName);
                opart.AddCell("sex", sex);
                opart.AddCell("briefIntrodu", briefIntrodu);
                opart.AddCell("countryId", countryId);
                opart.AddCell("cityId", cityId);
                opart.AddCell("destionId", destionId);
                opart.AddCell("qq", qq);
                opart.AddCell("mobile", mobile);
                opart.AddCell("phone", phone);
                opart.AddCell("micro", micro);
                opart.AddCell("email", email);
                opart.AddCell("djackImg", djackImg);
                ajaxComm(opart);
            }

            function cancelEdit() {
                $(".modle").show();
                $(".edit").hide();
            }

            //验证用户昵称
            function vfcUserName(userName) {
                if (IsNull(userName)) {
                    layer.alert("用户昵称不能为空", 3);
                    return false;
                } else if (userName.toUpperCase().indexOf("地接客") >= 0 || userName.toUpperCase().indexOf("DJK") >= 0 || userName.toUpperCase().indexOf("DIJIEKE") >= 0) {
                    layer.alert("用户昵称不可用", 3);
                    return false;
                }
                if (!isEnLength(userName, 0, 40)) {
                    layer.alert("用户昵称最大长度为40个字符，中文算2个字符", 3);
                    return false;
                }
                return true;
            }

            //验证城市
            function vfcCity(cityId) {
                if (IsNull(cityId)) {
                    layer.alert("用户地区不能为空", 3);
                    return false;
                }
                return true;
            }

            //验证头像
            function vfcImg(photo) {
                if (IsNull(photo)) {
                    layer.alert("地接客头像不能为空", 3);
                    return false;
                }
                return true;
            }

            //验证性别
            function vfcSex(sex) {
                if (sex != "F" && sex != "M") {
                    layer.alert("请选择性别", 3);
                    return false;
                }
                return true;
            }

            //验证简介
            function vfcIntrodu(briefIntrodu) {
                if (IsNull(briefIntrodu)) {
                    layer.alert("用户简介不能为空", 3);
                    return false;
                }
                if (!islength(briefIntrodu, 0, 240)) {
                    layer.alert("用户简介最大只能有240个字符", 3);
                    return false;
                }
                return true;
            }

            //验证QQ
            function vfcQQ(qq) {
                if (!IsNull(qq) && !isQQ(qq)) {
                    layer.alert("QQ格式不正确", 3);
                    return false;
                }
                return true;
            }

            //验证手机
            function vfcMobile(tell) {
                if (IsNull(tell)) {
                    layer.alert("手机号不能为空", 3);
                    return false;
                }
                if (!isZero(tell)) {
                    layer.alert("请输入正确的手机号码", 3);
                    return;
                }
                return true;
            }

            //验证微信
            function vfcMicro(micro) {
                if (IsNull(micro)) {
                    return true;
                }
                if (!isEnLength(micro, 0, 30)) {
                    layer.alert("微信最大长度为30个字符,中文算两个字符", 3);
                    return false;
                }
                return true;
            }

            //验证邮箱
            function vfcEmail(email) {
                if (IsNull(email)) {
                    layer.alert("邮箱不能为空", 3);
                    return false;
                }
                if (!IsEmail(email)) {
                    layer.alert("邮箱格式不正确", 3);
                    return false;
                }
                if (!isEnLength(email, 0, 50)) {
                    layer.alert("邮箱最大长度为50个字符,中文算两个字符", 3);
                    return false;
                }
                return true;
            }
        </script>
        <%=msBsc.WebUi.Code.QtHtmlGet.GetFloorHtml() %>
    </div>
</body>
</html>
